<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">头部设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.headHeight"
        />
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.backgroundColor"
        />
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">科室&号别设置</el-divider>
      </div>
      <!--科室设置-->
      <el-form-item
          label="科室&号别设定"
          class="column-info"
      >
        <el-checkbox-group
            v-if="roomInfoOptions && roomInfoOptions.length"
            v-model="optionsInfo.checkList"
        >
          <el-checkbox
              v-for="item in roomInfoOptions"
              :label="item.value"
              :key="item.value"
              v-if="item.show"
              :disabled="item.disabled"
          >
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <template v-if="optionsInfo['checkList'].includes(1)">
        <DeptNameKeyEditor
            :designer="designer"
            :option-model="optionModel"
            :selected-widget="selectedWidget"
        />
      </template>

      <!--诊室选中字段-->
      <template v-if="optionsInfo['checkList'].includes(3)">
        <RoomNameKeyEditor
            :designer="designer"
            :selected-widget="selectedWidget"
            :option-model="optionModel"
        />
      </template>

      <template v-if="optionsInfo['viewMode']===1">

        <el-form-item label="诊室信息背景颜色" v-if="optionsInfo.deptRoomInfoBackground">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo.deptRoomInfoBackground"
          />
        </el-form-item>

        <el-form-item label="科室字体粗细" v-if="optionsInfo.deptInfoFontWeight">
          <el-select v-model="optionsInfo['deptInfoFontWeight']" placeholder="请选择">
            <el-option
                v-for="item in fontWeightOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="科室字体颜色" v-if="optionsInfo.deptInfoColor">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo.deptInfoColor"
          />
        </el-form-item>
        <el-form-item label="科室字号">
          <el-input-number
              :min="0"
              size="small"
              v-model="optionsInfo.deptInfoFontSize"
          />
        </el-form-item>
        <el-form-item label="诊室字体粗细" v-if="optionsInfo.roomInfoFontWeight">
          <el-select v-model="optionsInfo['roomInfoFontWeight']" placeholder="请选择">
            <el-option
                v-for="item in fontWeightOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="诊室字体颜色" v-if="optionsInfo.roomInfoColor">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo.roomInfoColor"
          />
        </el-form-item>
        <el-form-item label="诊室字号">
          <el-input-number
              :min="0"
              size="small"
              v-model="optionsInfo.roomInfoFontSize"
          />
        </el-form-item>
      </template>

      <template v-if="!optionsInfo['viewMode']">
        <el-form-item label="字体粗细" v-if="optionsInfo.roomInfoFontWeight">
          <el-select v-model="optionsInfo['roomInfoFontWeight']" placeholder="请选择">
            <el-option
                v-for="item in fontWeightOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="字体颜色" v-if="optionsInfo.roomInfoColor">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo.roomInfoColor"
          />
        </el-form-item>
      </template>
    </div>

    <template v-if="optionsInfo['doctorArea']">
      <div class="list-item-setting">
        <div class="title-info">
          <el-divider content-position="left">医生设置</el-divider>
        </div>
        <el-form-item label="字体粗细" v-if="optionsInfo.doctorInfoFontWeight">
          <el-select v-model="optionsInfo['doctorInfoFontWeight']" placeholder="请选择">
            <el-option
                v-for="item in fontWeightOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
    </template>

    <template v-if="optionsInfo['patientArea']">
      <div class="list-item-setting">
        <div class="title-info">
          <el-divider content-position="left">患者设置</el-divider>
        </div>

        <el-form-item label="候诊类型" class="column-info">
          <el-radio-group
              v-model="optionsInfo.waitPatientType"
          >
            <el-radio
                :label="item.value"
                v-for="item in waitPatientTypeOptions"
                :key="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="字体粗细" class="column-info" v-if="optionsInfo.patientInfoFontWeight">
          <el-select v-model="optionsInfo['patientInfoFontWeight']" placeholder="请选择">
            <el-option
                v-for="item in fontWeightOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>

        <template v-if="patientEditShown('current')">
          <el-form-item label="就诊患者内容字号" class="column-info">
            <el-input-number
                size="small"
                class="hide-spin-button"
                v-model="optionsInfo.currentPatientContentFontsize"
            />
          </el-form-item>
        </template>

        <template v-if="patientEditShown('wait')">
          <el-form-item label="候诊患者内容字号" class="column-info">
            <el-input-number
                size="small"
                class="hide-spin-button"
                v-model="optionsInfo.waitPatientContentFontsize"
            />
          </el-form-item>
        </template>

      </div>
    </template>

    <template v-if="optionsInfo['tipsInfoArea']">
      <div class="list-item-setting">
        <div class="title-info">
          <el-divider content-position="left">温馨提示设置</el-divider>
        </div>
        <template v-if="optionsInfo['tipsArea']">
          <el-form-item label="温馨提示">
            <el-button
                type="primary" size="small"
                @click="handleSelect('formEditorInfo',(optionsInfo.tipsContent))"
            >
              文本内容
            </el-button>
          </el-form-item>
        </template>
        <el-form-item label="字体粗细" v-if="optionsInfo.tipsTitleInfoFontWeight">
          <el-select v-model="optionsInfo['tipsTitleInfoFontWeight']" placeholder="请选择">
            <el-option
                v-for="item in fontWeightOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="字体颜色" v-if="optionsInfo.tipsTitleInfoColor">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo.tipsTitleInfoColor"
          />
        </el-form-item>
      </div>
    </template>

    <template v-if="optionsInfo['passPatientArea']">
      <div class="list-item-setting">
        <div class="title-info">
          <el-divider content-position="left">过号患者设置</el-divider>
        </div>
        <el-form-item label="字体粗细" v-if="optionsInfo.passPatientInfoFontWeight">
          <el-select v-model="optionsInfo['passPatientInfoFontWeight']" placeholder="请选择">
            <el-option
                v-for="item in fontWeightOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="字体颜色" v-if="optionsInfo.passPatientInfoColor">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo.passPatientInfoColor"
          />
        </el-form-item>
      </div>
    </template>


    <template v-if="optionsInfo['publishArea']">
      <div class="list-item-setting">
        <div class="title-info">
          <el-divider content-position="left">信息发布设置</el-divider>
        </div>
        <el-form-item label="正文设置" class="call-patient-set">
          <el-button type="primary" @click="handleSelect('formVideoInfo',(optionsInfo.publishInfo))">
            素材选择
          </el-button>
        </el-form-item>

        <el-form-item label="视频声音" class="call-patient-set" v-if="false">
          <el-input-number
              :min="0"
              :max="10"
              :step="1"
              size="small"
              v-model="optionsInfo.publishInfo.sound"
          />
        </el-form-item>
      </div>
    </template>

    <!--更新文本内容-->
    <updateFormEditor
        :visible="formEditorInfo.visible"
        :info="formEditorInfo.info"
        @handleCancel="handleCancel"
        @handleSure="handleSure"
    />

    <!--选择图片的弹层-->
    <SelectVideoText
        :info="formVideoInfo.info"
        :visible="formVideoInfo.visible"
        :multiple="formVideoInfo.multiple"
        :infoContent="formVideoInfo.infoContent"
        @handleCancel="handleCancel"
        @handleSure="handlePublishSure"
    />
  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import DeptNameKeyEditor from "../basicInfo/deptNameKey-editor.vue";
import RoomNameKeyEditor from "../basicInfo/roomNameKey-editor.vue";
import WaitPatientTypeEditor from "../basicInfo/waitPatientType-editor.vue";
import * as types from "@c/public/form-designer/devType/datas-types";
import UpdateFormEditor from "@c/public/layer/template/updateFormEditor/index.vue";
import SelectVideoText from "@c/public/layer/template/selectVideoText/index.vue";

export default {
  name: "DRCDoctorConfig-editor",
  components: {SelectVideoText, UpdateFormEditor, RoomNameKeyEditor, DeptNameKeyEditor, WaitPatientTypeEditor},
  componentName: "DRCDoctorConfig-editor",
  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      radio: 1,
      optionsInfo: Object(),
      formEditorInfo: {
        info: Object(),
        visible: false
      },
      constantDic: constantDic,
      roomInfoOptions: [
        {
          show: true,
          disabled: false,
          value: 1,
          label: "科室",
        },
        {
          show: false,
          disabled: false,
          value: 2,
          label: "号别",
        },
        {
          show: true,
          disabled: true,
          value: 3,
          label: "诊室",
        },
      ],
      waitPatientTypeOptions: [
        {
          value: 1,
          label: "诊室等候",
        },
        {
          value: 2,
          label: "候诊列表",
        },
      ],
      predefineColors: types['predefineColors'],
      fontWeightOptions: types["fontWeightOptions"],
      formVideoInfo: {
        info: Object(),
        visible: false,
        multiple: false,
      },
    }
  },

  computed: {
    patientEditShown() {
      return function (row) {
        let {currentPatientShown = true, waitPatientShown = true} = this.optionsInfo
        switch (row) {
          case 'current':
            return currentPatientShown
          case 'wait':
            return waitPatientShown;
        }
      }
    }
  },

  methods: {
    // 选择文本内容&视频
    handleSelect(val, content) {
      let params = Object();
      switch (val) {
        case 'formEditorInfo':
          Reflect.set(params, 'updataType', 'tipsContent');
          Reflect.set(params, 'content', content || '')
          Reflect.set((this.formEditorInfo), 'visible', true);
          Reflect.set((this.formEditorInfo), 'info', params);
          break;
        case 'formVideoInfo':
          // 查找资源库对应的资源
          Reflect.set(params, 'type', 'video');
          // 修改对应的字段
          Reflect.set(params, 'updataType', 'video');
          Reflect.set(params, 'multiple', false);
          let contents = Object();
          Reflect.set(contents, 'tabsName', content['tabsName']);
          Reflect.set(contents, 'textContent', content['textInfo']);
          Reflect.set(contents, 'videoContent', content['videoInfo'])
          Reflect.set(contents, 'pictureContent', content['pictureInfo'])
          // 旧的数据
          Reflect.set(params, 'content', contents);
          Reflect.set((this.formVideoInfo), 'infoContent', contents);
          Reflect.set((this.formVideoInfo), 'visible', true);
          Reflect.set((this.formVideoInfo), 'info', params);
          break;
      }
    },

    // 关闭弹层
    handleCancel() {
      Reflect.set(this.formEditorInfo, 'visible', false);
      Reflect.set(this.formVideoInfo, 'visible', false)
    },

    // 更新就的数据
    handleSure(valInfo) {
      let {key, val} = valInfo;
      Reflect.set((this.optionsInfo), key, val);
    },

    // 信息发布
    handlePublishSure(valInfo) {
      let {tabsName, textContent,videoContent,pictureContent} = valInfo;
      switch (tabsName) {
        case "textarea":
          Reflect.set((this.optionsInfo.publishInfo), 'tabsName', tabsName);
          Reflect.set((this.optionsInfo.publishInfo), 'textInfo', textContent);
          break
        case "video":
          Reflect.set((this.optionsInfo.publishInfo), 'tabsName', tabsName);
          Reflect.set((this.optionsInfo.publishInfo), 'videoInfo', videoContent);
          break
        case "picture":
          Reflect.set((this.optionsInfo.publishInfo), 'tabsName', tabsName);
          Reflect.set((this.optionsInfo.publishInfo), 'pictureInfo', pictureContent);
          break
      }
    },
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true
    }
  }


}
</script>


<style lang="scss" scoped>
.column-info {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }

    .el-radio-group {
      display: flex;
      flex-direction: column;

      .el-radio {
        padding: 8px 0;
      }
    }
  }

}


</style>